<template>
  <div>
    <div class="container" style="margin-top: 1rem">
      <div class="common-list-class">
        <div style="display: flex">
          <div class="common-title-div"></div>
          <div class="common-title-text">安全教育分类列表</div>
        </div>
        <div style="display: flex">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-circle-plus-outline"
            @click="newaddNodeClick"
            >新增一级分类</el-button
          >
          <!-- <el-button type="danger" size="mini"  icon="el-icon-delete">删除</el-button> -->
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-caret-bottom"
            @click="unFoldAll"
            >展开</el-button
          >
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-caret-top"
            @click="collapseAll"
            >收起</el-button
          >
        </div>
      </div>
      <el-table
        :data="treeList"
        :row-style="rowStyle"
        ref="selectTree"
        size="mini"
        default-expand-all
        :expand-row-keys="expandkeysList"
        :header-cell-style="tableHeaderColor"
        style="width: 100%; margin-top: 10px"
        row-key="id"
        border
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column
          prop="title"
          label="分类名称"
          width="180"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <span style="font-weight: bold" v-if="scope.row.level == 2">{{
              scope.row.title
            }}</span>
            <span v-else>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="questionNum"
          label="题目数量"
          width="180"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="description"
          label="分类描述"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              v-if="
                (typeCode == 'business' && scope.row.serviceType == 1) ||
                (typeCode == 'police' && scope.row.serviceType == 0)
              "
              icon="el-icon-edit"
              @click="editNode(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-error"
              v-if="
                scope.row.questionNum == 0 &&
                ((typeCode == 'business' && scope.row.serviceType == 1) ||
                  (typeCode == 'police' && scope.row.serviceType == 0))
              "
              @click="deleteNode(scope.row)"
              >删除</el-button
            >
            <el-button
              size="mini"
              type="success"
              v-if="
                scope.row.level !== 4 &&
                ((typeCode == 'business' && scope.row.serviceType == 1) ||
                  (typeCode == 'police' && scope.row.serviceType == 0))
              "
              icon="el-icon-circle-plus-outline"
              @click="appendNewNode(scope.row)"
              >新增</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 查询列表 -->
      <!-- <div class="block">
                <div class="custom-tree-node-title" style="width:100%;margin-top:1rem;">
                    <el-col :span="6" style="margin-left:2%;">分类名称</el-col>
                    <el-col :span="6" style="margin-left:2%;">题目数量</el-col>
                    <el-col :span="8" style="margin-left:10%;">分类描述</el-col>
                    <el-col :span="3">操作</el-col>
                </div>
                
                <el-tree :data="treeList" show-checkbox node-key="id" highlight-current :props="defaultProps" ref="selectTree" default-expand-all :expand-on-click-node="false">
                    <div class="custom-tree-node" slot-scope="{ node, data }">
                            <el-col :span="4" >{{ node.label }}</el-col>
                            <el-col :span="5" :class="'numclass'+data.level">{{ data.questionNum }}</el-col>
                            <el-col :span="6" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;text-align:center;" :title="data.description">{{ data.description }}</el-col>
                            <el-col :span="4" :class="'buttomclass'+data.level">
                                <el-button icon="el-icon-edit" type="text" size="mini" @click="() => editNode(node,data)">
                                    编辑
                                </el-button>
                                <el-button icon="el-icon-error" type="text" style="color:#f4b26b;" size="mini" @click="() => deleteNode(node,data)">
                                    删除
                                </el-button>
                                <el-button icon="el-icon-circle-plus-outline" v-if="data.level !== 4" style="color:#74b364;" type="text" size="mini" @click="() => appendNewNode(node, data)">
                                    新增
                                </el-button>
                            </el-col>
                    </div>
                </el-tree>
            </div> -->
    </div>
    <!-- 新增分类 -->
    <el-dialog
      title="新增"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="newNodeFlag"
      width="40%"
      :before-close="addNodeClose"
      center
    >
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">{{ isEditTitle }}</div>
      </div>
      <el-form
        ref="inputObj"
        :model="inputObj"
        label-width="120px"
        :rules="rules"
      >
        <el-form-item label="分类名称" prop="title">
          <el-input
            v-model="inputObj.title"
            placeholder="请输入分类名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="分类描述" prop="description">
          <el-input
            v-model="inputObj.description"
            type="textarea"
            :rows="5"
            placeholder="请输入分类描述"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="addNodeSubmit"
          >提 交</el-button
        >
        <el-button size="mini" @click="addNodeClose">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixin/mixin.js";
export default {
  name: "classification",
  mixins: [mixin],
  data() {
    return {
      expandkeysList: [],
      newNodeFlag: false,
      defaultProps: {
        children: "children",
        label: "title",
      },
      treeList: [],
      companyList: [],
      bindingFlag: false,
      bindObj: {
        company: [],
      },
      daoruFlag: false,
      successList: [],
      failList: [],
      companyTypeList: [],
      statusObj: {
        0: "已停用",
        1: "已启用",
      },
      uploadHeader: {},
      uploadUrl: "/wgry/business/importedBusiness",
      detailsObj: {},
      inputObj: {},
      rules: {
        title: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
        description: [
          { required: true, message: "请输入分类描述", trigger: "blur" },
        ],
      },
      detailsFlag: false,
      isEditTitle: "",
      newaddFlag: false,
      pageSizes: [10, 15, 50, 100],
      pagesize: 10,
      total: 10,
      currentPage: 1,
      tableData: [],
      currentId: "",
      searchObj: {
        companyName: "",
        position: "",
      },
      companyTypeListObj: {},
      currentNodeId: "",
      currentNodeParentId: "",
    };
  },
  created() {
    this.query();
  },
  methods: {
    newaddNodeClick() {
      this.isEditTitle = "新增分类";
      this.newNodeFlag = true;
    },
    addNodeClose() {
      this.newNodeFlag = false;
    },
    addNodeSubmit() {
      let self = this;
      this.$refs["inputObj"].validate((valid) => {
        if (valid) {
          let url = "";
          let params = self.inputObj;
          if (self.isEditTitle == "新增分类") {
            url = "/questions/addOneSubject";
          } else if (self.isEditTitle == "新增子节点") {
            url = "/questions/addChildrenSubject";
            params.id = self.currentNodeId;
          } else {
            params.id = self.currentNodeId;
            params.parentId = self.currentNodeParentId;
            url = "/questions/editSubjectInfo";
          }

          self.showLoading();
          self
            .$axios({
              method: "post",
              url: url,
              headers: {
                Authorization: this.requestToken,
              },
              data: params,
            })
            .then((res) => {
              self.hideLoading();
              if (res.data.code == "20000") {
                self.$message({
                  message: res.data.message,
                  type: "success",
                });
                self.newNodeFlag = false;
                self.inputObj = {};
                self.query();
              } else {
                self.$message({
                  message: res.data.message,
                  type: "error",
                });
              }
            })
            .catch((err) => {
              self.hideLoading();
              self.$message({
                message: err.response.data.message,
                type: "error",
              });
            });
        } else {
          return false;
        }
      });
    },
    // 编辑
    editNode(data) {
      let self = this;
      self.isEditTitle = "编辑分类";
      self.currentNodeId = data.id;
      self.currentNodeParentId = data.parentId;
      console.log(data);
      self.inputObj = {
        title: data.title,
        description: data.description,
      };
      self.newNodeFlag = true;
    },
    appendNewNode(data) {
      let self = this;
      self.isEditTitle = "新增子节点";
      self.currentNodeId = data.id;
      console.log("data", data);
      self.newNodeFlag = true;
    },
    deleteNode(data) {
      let self = this;
      self.currentNodeId = data.id;
      this.$confirm("请确认是否删除该分类?", "删除", {
        confirmButtonText: "是",
        cancelButtonText: "否",
      })
        .then(() => {
          this.showLoading();
          this.$axios({
            method: "delete",
            url: `/questions/deleteSubjectInfoById/${data.id}`,
            headers: {
              Authorization: this.requestToken,
            },
          })
            .then((res) => {
              this.hideLoading();
              if (res.data.code == "20000") {
                this.$message.success("删除成功！");
                this.query();
              } else {
                this.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              this.hideLoading();
              this.$message.error(err);
            });
        })
        .catch(() => {});
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return "background-color:#f5f5f5;color:#626262;";
    },
    rowStyle({ row, rowIndex }) {
      let style1 = {};
      let style2 = {};
      if (rowIndex % 2 == 0) {
        style1.background = "#ffffff";
        return style1;
      } else {
        style2.background = "#f5f5f5";
        return style2;
      }
    },
    query() {
      this.showLoading();
      this.$axios({
        method: "get",
        url: `/questions/queryIndexAllSubject`,
        headers: {
          Authorization: this.requestToken,
        },
      })
        .then((res) => {
          this.hideLoading();
          if (res.data.code == "20000") {
            this.treeList = res.data.data[0].children;
            console.log(this.treeList);
          } else if (res.data.code == "30002") {
            this.$router.push("/login");
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    formateTree(arr, isExpand) {
      let self = this;
      arr.forEach((i) => {
        self.$refs.selectTree.toggleRowExpansion(i, isExpand);
        if (i.children) {
          self.formateTree(i.children, isExpand);
        }
      });
    },
    unFoldAll() {
      this.formateTree(this.treeList, true);
    },
    // 全部折叠
    collapseAll() {
      this.formateTree(this.treeList, false);
    },
  },
};
</script>
<style scoped>
.common-title-flex {
  display: flex;
}
.common-title-div {
  width: 3px;
  height: 16px;
  background-color: #368af7;
  margin-top: 2px;
}
.common-title-text {
  margin-left: 4px;
  font-size: 14px;
}
.common-list-class {
  display: flex;
  justify-content: space-between;
  margin-top: -10px;
}
.upload-file >>> .el-upload--text {
  border: none;
  width: 100px;
  height: 36px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.custom-tree-node-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bold;
  background: #f5f5f5;
  padding: 10px 0px;
}
.numclass2 {
  margin-left: -145px;
  text-align: center;
}
.numclass3 {
  margin-left: -160px;
  text-align: center;
}
.numclass4 {
  margin-left: -175px;
  text-align: center;
}
.buttomclass2 {
  margin-right: 0px;
}
.buttomclass3 {
  margin-right: 2px;
}
.buttomclass4 {
  margin-right: 5px;
}
</style>>